<template>
  <div class="layout collapse-menus">
    <div class="main-content">
      <Row>
        <Col span="8">&nbsp;</Col>
        <Col span="8" class="login" :style="{ marginTop: marginTop + 'px' }">
          <Form :label-col="labelCol" style="margin-top: 20px">
            <Form.Item style="display: inline-block; width: 100%; text-align: right; margin-bottom: 20px">
              <img src="/images/logo.svg" style="width: 136px; height: 68px; text-align: right" />
            </Form.Item>
            <Form.Item label="账号" :rules="[{ required: true }]">
              <Input size="large" v-model:value="account" type="text" />
            </Form.Item>
            <Form.Item label="密码" :rules="[{ required: true }]">
              <Input size="large" v-model:value="password" type="password" />
            </Form.Item>
            <Form.Item :wrapper-col="{ span: 14, offset: 4 }">
              <Button size="large" style="width: 130px" type="primary" shape="round" @click="logOn"><LoginOutlined /> 登录</Button>
            </Form.Item>
          </Form>
        </Col>
        <Col :span="8">&nbsp;</Col>
      </Row>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';
  import { ref, inject, reactive, onMounted } from 'vue';

  import { Row, Col, Form, Input, Button } from 'ant-design-vue';
  import { LoginOutlined } from '@ant-design/icons-vue';

  import md5 from 'js-md5';

  const $store = useStore();
  const $router = useRouter();

  const $http = inject('$http');
  const $message = inject('$message');

  const marginTop = ref(200);
  const labelCol = reactive({ span: 4 });

  const account = ref('');
  const password = ref('');

  function logOn() {
    if (!account.value) {
      $message.warn({ content: '请输入账号！', key: 'valid-error', duration: 3 });

      return;
    }

    if (!password.value) {
      $message.warn({ content: '请输入密码！', key: 'valid-error', duration: 3 });

      return;
    }

    let loginData = { account: account.value, password: md5(password.value) };

    $http.post('/api/account/login', loginData, { hideTip: true }).then(rs => {
      if (rs.success) {
        $store.commit('fillConfigs', {
          userId: rs.data.Id,
          userAccount: rs.data.Account,
          userName: rs.data.UserName
        });

        localStorage.setItem('lastLoginAccount', JSON.stringify(loginData));

        $router.push('/');
      } else {
        $message.warn({ content: rs.message, key: 'valid-error', duration: 3 });
      }
    });
  }

  onMounted(() => {
    marginTop.value = (window.innerHeight - 400) / 2;

    let loginData = JSON.parse(localStorage.getItem('lastLoginAccount') || '{}');

    if (loginData.account && loginData.password) {
      $http.post('/api/account/login', loginData, { hideTip: true }).then(rs => {
        if (rs.success) {
          $store.commit('fillConfigs', {
            userId: rs.data.Id,
            userAccount: rs.data.Account,
            userName: rs.data.UserName
          });

          localStorage.setItem('lastLoginAccount', JSON.stringify(loginData));

          $router.push('/');
        } else {
          localStorage.removeItem('lastLoginAccount');
        }
      });
    }
  });
</script>

<style lang="less" scoped>
  .main-content {
    width: 100%;

    .login {
      background-color: #fff;
      border: 1px solid #fff;
      border-radius: 10px;
      padding: 0 25px 20px 0;
    }
  }
</style>
